<template>
  <div class="comment">
    <h3 class="title">评论管理</h3>

    <xu-table :data="tableData" :options="tableOptions" :pager="pager">
      <template slot="user" slot-scope="{ row }">{{ row.user ? row.user.nickname : '' }}</template>
      <template slot="course" slot-scope="{ row }">
        <el-tooltip :content="row.course ? row.course.title : ''">
          <span>{{ row.course ? row.course.title : '' }}</span>
        </el-tooltip>
      </template>
      <template slot="star" slot-scope="{ row }">
        <el-rate disabled v-model="row.star" />
      </template>
      <template slot="content" slot-scope="{ row }">
        <el-tooltip :content="row.content">
          <span>{{ row.content }}</span>
        </el-tooltip>
      </template>
      <template slot="status" slot-scope="{ row }">
        <el-switch
          v-model="row.status"
          active-value="1"
          inactive-value="0"
          @change="changeSwitch($event, row)"
        />
      </template>
    </xu-table>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import table from '../../../mixins/table'
import { CommentActionsEnum } from '../../../_/vue/store/comment'
export default {
  mixins: [table],
  data () {
    return {
      tableOptions: [
        { attrs: { label: '用户', prop: 'user' } },
        { attrs: { label: '课程名称', prop: 'course' } },
        { attrs: { label: '评论分数', prop: 'star' } },
        { attrs: { label: '评论内容', prop: 'content' } },
        { attrs: { label: '评论时间', prop: 'create_time' } },
        {
          attrs: {
            label: '状态',
            prop: 'status',
            width: '120px',
            align: 'center'
          }
        },
        {
          attrs: {
            label: '操作',
            prop: 'opt',
            width: '120px',
            align: 'center'
          },
          buttons: [{
            label: '删除',
            type: 'popover',
            icon: 'el-icon-delete',
            click: ({ row }) => {
              this.delete({ ids: [row.id] })
              this.$message.success('删除成功')
              this.getData()
            }
          }]
        }
      ]
    }
  },
  methods: {
    ...mapActions({
      list: CommentActionsEnum.LIST,
      switch: CommentActionsEnum.SWITCH,
      delete: CommentActionsEnum.DELETE
    }),
    async changeSwitch (val, row) {
      try {
        const resp = await this.switch({ id: row.id, status: val })
        this.$message.success(resp.message)
      } catch (err) {
        row.status = val === '0' ? '1' : '0'
      }
    }
  }
}
</script>
